<template>
  <div class="app-container">
    <el-form :inline="true" ref="refForm" :model="form">
      <el-form-item label="查询时间" prop="time">
        <el-date-picker
          v-model="form.time"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-col :span="12">
          <el-form-item prop="filterMin">
            <el-input v-model.number="form.filterMin">
              <template slot="prepend">
                <el-select v-model="form.filter" style="width: 120px;">
                  <el-option :value="undefined" label="全部"></el-option>
                  <el-option
                    v-for="item in consts.ORDER_FIELD_TREND"
                    :value="item.key"
                    :label="item.title"
                    :key="item.value"
                  ></el-option>
                </el-select>
              </template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="1" style="text-align: center">
          -
        </el-col>
        <el-col :span="6">
          <el-form-item prop="filterMax">
            <el-input v-model.number="form.filterMax"></el-input>
          </el-form-item>
        </el-col>
      </el-form-item>
      <el-form-item v-if="roleCheck('virtual')" class="with-pre-select" label="数据类型">
        <el-select v-model="form.isFake">
          <el-option v-for="item in consts.STATISTICS_RANGE"
                     :key="item.value"
                     :label="item.title"
                     :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="submitFilterForm">搜索</el-button>
      <el-button v-if="roleCheck('export')" class="filter-item" type="primary" icon="el-icon-download"  @click="exportExcel">导出</el-button>
    </el-form>
    <el-table
      show-summary
      @sort-change="sortChange"
      :summary-method="getSummaries"
      border :data="tableData.list" v-loading="loading" element-loading-text="加载中..." class="el-table-align-center">
      <el-table-column label="账户名" prop="userName" width="180" align="center"></el-table-column>

      <el-table-column sortable prop="firstRecharge" label="首存金额" align="center">
        <template slot-scope="{row}">
          {{row.firstRecharge | currency}}
        </template>
      </el-table-column>
      <el-table-column sortable prop="rechargeAmount" label="充值金额" align="center">
        <template slot-scope="{row}">
          {{row.rechargeAmount | currency}}
        </template>
      </el-table-column>

      <el-table-column sortable prop="withdrawAmount" label="提现金额" align="center">
        <template slot-scope="{row}">
          {{row.withdrawAmount | currency}}
        </template>
      </el-table-column>
      <el-table-column sortable prop="bettingAmount" label="投注金额" align="center">
        <template slot-scope="{row}">
          {{row.bettingAmount | currency}}
        </template>
      </el-table-column>
      <el-table-column sortable prop="bettingWin" label="盈亏金额" align="center">
        <template slot-scope="{row}">
          {{row.bettingWin | currency}}
        </template>
      </el-table-column>
      <el-table-column sortable prop="promoAmount" label="优惠金额" align="center">
        <template slot-scope="{row}">
          {{row.promoAmount | currency}}
        </template>
      </el-table-column>
      <el-table-column sortable prop="rebateAmount" label="返水总额" align="center">
        <template slot-scope="{row}">
          {{row.rebateAmount | currency}}
        </template>
      </el-table-column>
      <!--<el-table-column prop="source" label="来源">-->
      <!--<template slot-scope="{row}">-->
      <!--{{row.source | toConverter('DEVICE_TYPE')}}-->
      <!--</template>-->
      <!--</el-table-column>-->
    </el-table>

    <div class="pagination-container">
      <el-pagination background @size-change="gridSizeChange" @current-change="gridCurrentChange"
                     :current-page="filters.page" :page-sizes="gridPageSize" :page-size="filters.size"
                     :layout="gridLayout" :total="tableData.total">
      </el-pagination>
    </div>
  </div>
</template>


<script>
  import {getStatisticalBetRecharge} from "@/services/api/statistical";
  import {currencyToNumber} from '@/filters'
  import {grid ,handleDownload} from '@/build'

  export default {
    name: "statistics-bet-recharge",
    mixins: [grid ,handleDownload],
    data() {
      // let times = _.toPeriod({
      //   start: [-1, 'days'],
      //   end: [0, 'days'],
      //   format: 'YYYY-MM-DD'
      // });
      // 本月时间本月1号至当前时间
      const monthTime = [moment().startOf('month').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')]

      return {
        tableData: {
          list: [],
          total: 0
        },
        form: {
          time: monthTime,
          filter: undefined,
          isFake: 0,
        },
        filters: {
          stime: moment(monthTime[0]).valueOf(),
          etime: moment(monthTime[1]).valueOf() +  86399999,
          page: 1,
          size: 20,
          isFake: 0,
        },
      }
    },
    methods: {
      submitFilterForm() {
        const {time, filter, filterMax, filterMin,isFake} = this.form;
        let stime = undefined, etime = undefined;
        if (!_.isUndefined(time) && _.isArray(time)) {
          stime = moment(time[0]).valueOf();
          etime = moment(time[1]).valueOf() +  86399999;
        }
        this.filters = {...this.filters, filter, filterMax, filterMin, stime, etime, isFake, project: consts.PLATFROM_PREFIX}
        this.gridSearch()
      },
      getSummaries(param) {
        const {columns, data} = param;
        const sums = [];
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '汇总';
            return;
          }
          const values = data.map(item => Number(item[column.property]));
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return _.currency(currencyToNumber(prev) + parseFloat(currencyToNumber(curr)));
              } else {
                return _.currency(prev);
              }
            }, 0);
          } else {
            sums[index] = '';
          }
        });

        return sums;
      },
      sortChange(params) {
        const {prop, order} = params
        const orderField = _.find(consts.ORDER_FIELD_TREND, function (o) {
          return o.key === prop;
        })
        this.filters = {
          ...this.filters,
          orderType: order == 'ascending' ? 0 : 1,
          orderField: orderField.value
        }
        this.gridSearch()
      }
    },
    mounted() {
      this.bindGet(getStatisticalBetRecharge, 'tableData', {
        action: 'getGrid',
        sendingData: 'filters'
      });
      // this.getAll()
      this.submitFilterForm()
    }

  }
</script>

<style scoped>

</style>
